<template>
  <div class="box">
    <hu-card :pb='0' v-show="MixinSelectShow">
      <el-form :model="queryParams" class="mt10" label-width="110px" >
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入用户名"  style="width: 100%" @keyup.enter.native="searchList" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日志时间">
              <el-date-picker @change="getPicker" v-model="pickerValue" style="width: 220px" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件名称" prop="resourceId">
              <el-select style="width: 100%"    v-model="queryParams.resourceId" placeholder="请选择事件名称">
                <el-option v-for="dict in dataList" :key="dict.value" :value="dict.value" :label="dict.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0" style="float: right">
              <el-button type="primary" icon="el-icon-search"  @click="searchList" style="font-size: 14px;">搜索</el-button>
              <el-button icon="el-icon-refresh"  @click="resetQuery" style="font-size: 14px;margin-left:10px">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </hu-card>
    <hu-card>
      <el-row :gutter="10" class="mb8 space_between" type="flex">
        <el-col :span="1.5">
          <div>{{ ' ' }}</div>
        </el-col>
        <right-toolbar :tableCol.sync="tableCol" :CutShowSearch.sync="MixinSelectShow" @queryTable="getList"></right-toolbar>
      </el-row>
      <hu-table :tableData="tableData" id="table" ref="multipleTable" :loading="MixinLoading" :tableCol="tableCol">
      </hu-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </hu-card>
  </div>
</template>

  <script>
import * as http from "@/api/system/journal.js";
export default {
  name: "SystemJournal",
  data() {
    return {
      dataList: [
        {
          value: 0,
          label: "登录",
        },
      ],
      pickerValue: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams1: {},
      total: 0,
      tableData: [],
      tableCol: [
        {
          title: "用户",
          key: "operatorName",
          width: 100,
          show: true,
        },
        {
          title: "用户ID",
          key: "operatorId",
          minWidth: 150,
          show: true,
        },
        {
          title: "事件名称",
          key: "resourceName",
          minWidth: 100,
          show: true,
        },
        {
          title: "事件详情",
          key: "title",
          minWidth: 100,
          show: true,
        },
        {
          title: "日志时间",
          key: "operatorDate",
          width: 200,
          show: true,
        },
        {
          title: "ip地址",
          key: "reqIpAddress",
          width: 150,
          show: true,
        },
      ],
      sumObj: {},
    };
  },
  created() {
    this.getList();
  },
  computed: {
    userInfo() {
      return this.$store.getters.parameters;
    },
  },
  methods: {
    exportFile() {
      // downloadExcel("table", "职业病危害年度检测信息表一.xls");
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.upDate(params).then((res) => {
        this.$download.saveAs(res, "职业病危害年度检测信息表一.xls");
        this.MixinLoading = false;
      });
    },
    comChange(value) {
      if (value.length > 0) {
        this.queryParams.companyId = value.join(",");
      } else {
        this.queryParams.companyId = value;
      }
    },
    // 搜索时间
    getPicker(arrDate) {
      this.queryParams.startTime = arrDate ? arrDate[0] : undefined;
      this.queryParams.endTime = arrDate ? arrDate[1] : undefined;
    },
    // 查询
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // get list
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ result }) => {
        this.tableData = result.records;
        this.total = result.total;
        this.MixinLoading = false;
      });
    },
    getTotal() {
      let obj = {};
      this.tableData.forEach((item) => {
        for (const key in item) {
          if (!obj[key]) {
            obj[key] = 0;
          }
          obj[key] += item[key];
        }
      });
      this.sumObj = obj;
    },
    allocation() {
      this.$nextTick(() => {
        const tds = document.querySelectorAll(
          "#table .el-table__footer-wrapper .el-table__footer .has-gutter tr td"
        );
        tds[0].colSpan = 4;
        tds[0].style.textAlign = "center";
        tds[1].style.display = "none";
        tds[2].style.display = "none";
        tds[3].style.display = "none";
      });
    },
    /** 表格合计行渲染所有数据的和，不是当前页的和 */
    getSummariesMethod(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        let num = column.property;
        sums[index] = this.sumObj[num];
      });
      return sums;
    },
    // reset 查询
    resetQuery() {
      this.pickerValue = undefined;
      this.queryParams1 = {};
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
    },
  },
};
</script>

